<template>
	<view class="add-recommend-wrap">
		<view class="case header bg-white clear">
			<image :src="`${host}/${recommendData.img}`" class="cover pull-left" mode="aspectFill"></image>
			<view class="info pull-left">
				<text class="block name">{{ recommendData.title }}</text>
				<text class="block location text-overflow">
					<text class="iconfontPT icondingwei2 location-icon"></text>
					{{ recommendData.address }}
				</text>
				<!-- <text class="block date">
					<text class="iconfontPT iconhuodongshijian activity-start-date-icon"></text>
					{{recommendData.s_time}}
					<text>—</text>
					{{recommendData.e_time}}
				</text> -->
			</view>
		</view>
		<view class="case service-date bg-white">
			<view class="title bold">服务时间</view>
			<view class="flex-x-between">
				<view class="item start-date inline-block text-center">
					<picker mode="date" fields="day" :value="date" :start="startDate" :end="endDate" @change="handleStartDateChange">
						<view class="picker" v-if="form.startDate">{{ form.startDate }}</view>
						<view class="placeholder" v-else>开始时间</view>
					</picker>
				</view>
				<text>——</text>
				<view class="item end-date inline-block text-center">
					<picker mode="date" fields="day" :value="date" :start="startDate" :end="endDate" @change="handleEndDateChange">
						<view class="picker" v-if="form.endDate">{{ form.endDate }}</view>
						<view class="placeholder" v-else>结束时间</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="case banner bg-white">
			<view class="title bold">推荐主图</view>
			<view class="img">
				<view class="cover-image-wrap w100 h100 relative" @click="handleChooseImage">
					<view class="image-item inline-block relative w100 h100" v-if="form.cover.length">
						<image class="image w100 h100" :src="`${qiniuHost}/${form.cover}`" mode="aspectFill"></image>
						<text class="replace x-y-center">点击替换</text>
					</view>
					<view class="choose-image x-y-center text-center" v-else>
						<text class="iconfontPT icontupian02 block"></text>
						<text class="text">上传图片</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="amount-wrap flex-x-between bg-white">
				<text class="title bold">服务费用</text>
				<text class="amount theme bold">￥{{ form.price }}</text>
			</view>
			<view class="btn"><button class="confirm-btn" hover-class="hoverClass" @click="handlePurchase">购买服务</button></view>
		</view>
		<image-compress style="position: absolute; top: 0rpx; overflow: hidden;" ref="imageCompress" />
	</view>
</template>

<script>
import { payment, addRecommend, setMyRecommend } from '../../apis/personal/index.js';

import { platRecommend } from '../../apis/shop/api.js';

export default {
	data() {
		return {
			recommendData: {},
			startDate: '2020-07-10',
			endDate: '2022-07-10',
			form: {
				startDate: '',
				endDate: '',
				cover: '',
				price: 0
			},
			list: [],
			rules: {
				startDate: [
					{
						required: true,
						message: '请选择服务开始时间'
					}
				],
				endDate: [
					{
						required: true,
						message: '请选择服务结束时间'
					}
				],
				cover: [
					{
						required: true,
						message: '请选择封面'
					}
				]
			},
			store_id: '',
			token: ''
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.store_id = uni.getStorageSync('store_id');
		this.token = uni.getStorageSync('token');
		this.getSopInfo();
	},
	computed: {
		host() {
			return this.$baseHost.car;
		},
		qiniuHost() {
			return this.$baseHost.qiniuHost;
		}
	},
	// onShow() {
	// 	this.getRecommend()
	// },
	methods: {
		getSopInfo() {
			let that = this;
			platRecommend({
				store_id: that.store_id,
				token: that.token
			}).then(res => {
				that.recommendData = res.data.row;
				this.list = res.data.price_setting;
				let s = '',
					e = '',
					currentDate = this.$moment(new Date()).format('YYYY-MM-DD'),
					currentMonth = currentDate.split('-')[1];

				this.list.forEach((item, i) => {
					currentMonth == item.s_time.split('-')[1] && (s = item.days);
					e = item.e_time > (this.list[i + 1] ? this.list[i + 1].e_time : '') ? item.e_time : this.list[i + 1].e_time;
				});

				this.startDate = this.$moment(currentDate).getSomeDate(s, 'day');
				this.endDate = e;
			});
		},

		// getRecommend() {
		// 	this.$loading.show()

		// 	setMyRecommend({
		// 		item_id: this.id
		// 	}).then(res => {
		// 		this.$loading.hide()
		// 		// this.recommendData = res.data.organization
		// 		this.list = res.data.config

		// 	})
		// },
		handleChooseImage() {
			let _this = this;
			this.$uploadImage({
				imageCompressFn: this.$refs.imageCompress.start,
				uploadUrl: _this.$baseHost.car+'/api/common/upImage'
			}).then(response => {
				_this.form.cover = response;
			});
		},
		handleStartDateChange(e) {
			this.form.startDate = e.detail.value;
			this.form.price = 0;
			this.form.endDate && this.computedPrice(this.list, this.form.startDate, this.form.endDate);
		},
		handleEndDateChange(e) {
			if (this.$moment(this.form.startDate).isAfter(e.detail.value)) {
				return uni.showModal({
					title: '提示',
					content: '开始时间应该在结束时间之前!'
				});
			}
			this.form.endDate = e.detail.value;
			this.form.price = 0;
			this.form.endDate && this.computedPrice(this.list, this.form.startDate, this.form.endDate);
		},
		computedPrice(list, startDate, endDate) {
			const getDateSpan = (s, e) => {
				return this.$moment(s).getDateSpan(e);
			};

			// 筛选最小项
			const getMinItem = startDate => {
				let min = {
						s_time: '2000-01-01',
						e_time: '2050-01-01'
					},
					next = 0;
				list.forEach((item, i) => {
					getDateSpan(list[i].s_time, startDate) < (next ? next : getDateSpan(min.s_time, min.e_time)) &&
						(next = getDateSpan(list[i].s_time, startDate)) &&
						(min = list[i]);
				});
				return min;
			};
			const judge = startDate => {
				let minItem = getMinItem(startDate);

				const computePrice = endDate => {
					this.form.price += (getDateSpan(minItem.s_time > startDate ? minItem.s_time : startDate, endDate) + 1) * minItem.money;
				};
				if (endDate <= minItem.e_time) {
					computePrice(endDate);
				} else {
					computePrice(minItem.e_time);
					judge(minItem.e_time);
				}
			};

			judge(startDate);
		},
		handlePurchase() {
			let _this = this,
				startDate = this.form.startDate,
				endDate = this.form.endDate,
				params = {
					item_id: this.store_id,
					item_name: this.recommendData.title,
					recommend_image: this.form.cover,
					s_date: startDate,
					e_date: endDate,
					type: 5,
					price: this.form.price
				};

			this.$verification(this.form, this.rules, ok => {
				if (ok) {
					_this.$loading.show();
					addRecommend(params).then(res => {
						if (+res.code === 200) {
							_this.$loading.hide();
							const $params = {
								total_money: _this.form.price,
								district_money: 0,
								// pay_money: _this.form.price,
								pay_money: 1,
								coupon_id: 0,
								r_id: res.data,
								item_id: _this.store_id,
								store_id: _this.store_id,
								factory_id: uni.getStorageSync('factory_id') ? uni.getStorageSync('factory_id') : 1,
								type: 6,
								order_title: `${_this.recommendData.title}上推荐`,
								num: 0,
								goods_id: _this.id,
								img: _this.form.cover
							};
							payment($params).then(res => {
								if (res.code == 1) {
									uni.requestPayment({
										appId: res.data.appId,
										nonceStr: res.data.nonceStr,
										package: res.data.package,
										paySign: res.data.paySign,
										signType: res.data.signType,
										timeStamp: res.data.timeStamp,
										success(res) {
											uni.showToast({
												title: '支付成功！',
												icon: 'success'
											});
											uni.navigateBack({
												delta: 1
											});
										},
										fail(res) {}
									});
								}
							});
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="less">
.add-recommend-wrap {
	background: #f8f8f8;
	padding: 20rpx 0;
	height: 100vh;

	.placeholder {
		color: #999999;
	}

	.case {
		padding: 0 30rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;

		.title {
			padding: 30rpx 0;
			font-size: 30rpx;
			box-sizing: border-box;
			color: #333333;
		}
	}

	.header {
		padding-top: 30rpx;
		padding-bottom: 30rpx;

		.cover {
			width: 186rpx;
			height: 140rpx;
			border-radius: 10rpx;
		}

		.info {
			width: 505rpx;
			padding-left: 20rpx;
			box-sizing: border-box;

			.iconfontPT {
				font-size: 26rpx;
				margin-right: 10rpx;
			}

			.name {
				font-size: 34rpx;
				margin-bottom: 10rpx;
			}

			.location {
				font-size: 24rpx;
				color: #999999;
				margin-bottom: 10rpx;
			}

			.date {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}

	.service-date {
		padding-bottom: 30rpx;

		.item {
			width: 300rpx;
		}
	}

	.banner {
		padding-bottom: 30rpx;

		.img {
			height: 345rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: #f8f8f8;

			.replace {
				background: rgba(0, 0, 0, 0.2);
				padding: 15rpx 25rpx;
				border-radius: 5rpx;
			}

			.choose-image {
				width: 178rpx;
				height: 178rpx;
				background: #ff9187;
				border-radius: 100%;
				padding-top: 50rpx;
				box-sizing: border-box;

				.iconfontPT {
					color: #ffffff;
					margin-bottom: 15rpx;
				}
			}
		}
	}

	.footer {
		.amount-wrap {
			padding: 30rpx 30rpx;
			margin-bottom: 40rpx;
		}

		.btn {
			.confirm-btn {
				color: #ffffff;
				width: 690rpx;
				height: 90rpx;
				background: rgba(228, 24, 5, 1);
				border-radius: 16rpx;
			}
		}
	}
}
</style>
